<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>

		<div id="app">
			<input type="text" placeholder="请输入名字" v-model="keyword" />
			<ul>
				<li v-for="(item,index) of personsarr" :key="item.id">
					{{item.name}}-{{item.age}}--{{index}}
				</li>
			</ul>
		</div>
		<script src="../vue.js"></script>
		<script>
			/* 	watch 实现
			var app = new Vue({
				el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						keyword: "",

						persons: [{
								id: '001',
								name: "马冬梅",
								age: 18,
								sex: "女"
							},
							{
								id: '002',
								name: "周冬雨",
								age: 19,
								sex: "女"
							},
							{
								id: '003',
								name: "周杰伦",
								age: 20,
								sex: "男"
							},
							{
								id: '004',
								name: "马吴伦",
								age: 20,
								sex: "男"
							},
						],
						personsarr: "",

					}
				},
				//页面刷新时立刻执行的代码
				mounted: function() {},
				//对象 方法
				methods: {},
				//计算属性
				computed: {},
				//监视属性
				watch: {
					keyword: {
						immediate: true, //true 初始化时让handler调用一下 默认为fals
						//handler什么时候调用?当属性发生改变时。
						handler(val) {
							//filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
							this.personsarr = this.persons.filter((p) => {
								return p.name.indexOf(val) !== -1
							})
						}
					}
				},
			}); */


			//computed 实现
			var app = new Vue({
				el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						keyword: "",
						persons: [{
								id: '001',
								name: "马冬梅",
								age: 18,
								sex: "女"
							},
							{
								id: '002',
								name: "周冬雨",
								age: 19,
								sex: "女"
							},
							{
								id: '003',
								name: "周杰伦",
								age: 20,
								sex: "男"
							},
							{
								id: '004',
								name: "马吴伦",
								age: 20,
								sex: "男"
							},
						],


					}
				},
				//页面刷新时立刻执行的代码
				mounted: function() {},
				//对象 方法
				methods: {},
				//计算属性
				computed: {
					personsarr() {
						return this.persons.filter((p) => {
							return p.name.indexOf(this.keyword) !== -1
						})
					}
				},
				//监视属性
				watch: {

				},
			});
		</script>
	</body>
</html>
